<<set $map to
[[0,0,0,0,0,0,0,0,0,0,0],
[0,1,1,1,0,3,1,1,1,1,0],
[0,0,0,1,0,0,0,0,0,1,0],
[0,1,0,1,1,1,1,1,0,1,0],
[0,1,0,0,0,0,0,1,0,1,0],
[0,1,1,1,1,1,1,1,0,1,0],
[0,0,0,0,0,0,0,1,0,1,0],
[0,1,0,1,1,1,1,1,1,1,0],
[0,1,0,1,0,0,0,1,0,0,0],
[0,1,1,1,0,1,1,1,1,1,0],
[0,0,0,0,0,0,0,0,0,0,0]]>>\
<<set $px to 9>><<set $py to 9>>\
<div id="map"></div>\
<<done>><<update>><</done>>\
<<link "North">><<if $px gt 1 and $map[$px-1][$py] is 1>><<set $map[$px][$py] to 1>><<set $px-->><<update>><</if>><</link>>
<<link "South">><<if $px lt 10 and $map[$px+1][$py] is 1>><<set $map[$px][$py] to 1>><<set $px++>><<update>><</if>><</link>>
<<link "East">><<if $py lt 10 and $map[$px][$py+1] is 1>><<set $map[$px][$py] to 1>><<set $py++>><<update>><</if>><</link>>
<<link "West">><<if $py gt 1 and $map[$px][$py-1] is 1>><<set $map[$px][$py] to 1>><<set $py-->><<update>><</if>><</link>>
[[Code]]data:image/gif;base64,R0lGODlhIAAgAPAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtJbWFnZU1hZ2ljaw5nYW1tYT0wLjQ1NDU0NQAh+QQJMgABACwAAAAAIAAgAAACboyPqcsN/5pcsM4bqsYywgxwTpgZkUhpH5qoFmu6Kit/L1aTM567vO/ZdWwk0GEzsfRujFstVmyuoM5pauoDWVvIp5B7oiK1UcQ4Ry4fX5ueqMtEwbecc7zOvP/K+ku8n7QFOBRGBSP05YeYeFAAACH/C0ltYWdlTWFnaWNrDmdhbW1hPTAuNDU0NTQ1ACH5BAkyAAEALAAAAAAgACAAAAJtjI+py+3/gJSwhomtw1wzOl2At1CXYZIIl6kH26owTM5hDNmjiG86nZuJeL3SbTdEFRUZHTFosimRjRiQB0Vel6umsFPtSMGf0JTGPY/E0rBQnWbi4u7UU2Z+5T09etl+V7MXqMGi59dFdpVQAAA7data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEXd3Nz///8r/gRVAAAAAXRSTlMAQObYZgAAAAFiS0dEAf8CLd4AAAAJcEhZcwAALEsAACxLAaU9lqkAAAAHdElNRQflChoHFCYGpcvmAAAADElEQVQI12NgGNwAAACgAAFhJX1HAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTEwLTI2VDA3OjIwOjIzKzAwOjAwr6xiLgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0xMC0yNlQwNzoyMDoyMyswMDowMN7x2pIAAAAASUVORK5CYII=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAM9JREFUWEftllkOwCAIROv9D91GUwzFwT1qGvpl3HgdGNVdmz/3xr93cXAAahOLh/J9BEdtbR7/h+q1EkAqgcY1KLQWwX/mrQBAwFGtmhQgaXNy0xiqryR9WhHyfFM+/ca53Gop4Apw8NC/AsAHRRAJQIsLap1RnHfUObDlLDpKAVkDJUV41beuJUeF6uT2KgWV/ueeR/dJ1oJkDwOYpUBL+qwGYnH+ygVba6A1eNWDRNtUvgm6g/ccRPJ6HQreA4BeRUMQs1zQDWEApoAp8AATA4YCmT0FvwAAAABJRU5ErkJggg==data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACVBMVEXd3NwPCQ//////YaMsAAAAAXRSTlMAQObYZgAAAAFiS0dEAmYLfGQAAAAJcEhZcwAALEsAACxLAaU9lqkAAAAHdElNRQflChoHFCYGpcvmAAAAJElEQVQY02MIhQIGfAwGMCDACIVReBhAMxmowSDKLsJuJux3AOemL9F0C9ZRAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTEwLTI2VDA3OjIwOjIzKzAwOjAwr6xiLgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0xMC0yNlQwNzoyMDoyMyswMDowMN7x2pIAAAAASUVORK5CYII=<<widget "update">>\
<<replace #map>>\
<<for $x to 0; $x lt 10; $x++>>\
<<for $y to 0; $y lt 10; $y++>>\
<<set $map[$px][$py] to 2>>\
<<switch $map[$x][$y]>>\
<<case 0>><img data-passage="block.png">\
<<case 1>><img data-passage="empty.png">\
<<case 2>><img data-passage="alien.gif">\
<<case 3>><img data-passage="snack store.png">\
<</switch>>\
<</for>>\
<br>\
<</for>>\
<</replace>>\
<</widget>><<run UIBar.destroy()>>Initial passage:
{{{
<<set $map to
[[0,0,0,0,0,0,0,0,0,0,0],
[0,1,1,1,0,3,1,1,1,1,0],
[0,0,0,1,0,0,0,0,0,1,0],
[0,1,0,1,1,1,1,1,0,1,0],
[0,1,0,0,0,0,0,1,0,1,0],
[0,1,1,1,1,1,1,1,0,1,0],
[0,0,0,0,0,0,0,1,0,1,0],
[0,1,0,1,1,1,1,1,1,1,0],
[0,1,0,1,0,0,0,1,0,0,0],
[0,1,1,1,0,1,1,1,1,1,0],
[0,0,0,0,0,0,0,0,0,0,0]]>>\
<<set $px to 9>><<set $py to 9>>\
<div id="map"></div>\
<<done>><<update>><</done>>\
<<link "Norte">><<if $px gt 1 and $map[$px-1][$py] is 1>><<set $map[$px][$py] to 1>><<set $px-->><<update>><</if>><</link>>
<<link "Sul">><<if $px lt 10 and $map[$px+1][$py] is 1>><<set $map[$px][$py] to 1>><<set $px++>><<update>><</if>><</link>>
<<link "Oeste">><<if $py gt 1 and $map[$px][$py-1] is 1>><<set $map[$px][$py] to 1>><<set $py-->><<update>><</if>><</link>>
<<link "Leste">><<if $py lt 10 and $map[$px][$py+1] is 1>><<set $map[$px][$py] to 1>><<set $py++>><<update>><</if>><</link>>
}}}
The "update" widget (must be in a "widget" tagged passage)
{{{
<<widget "update">>\
<<replace #map>>\
<<for $x to 0; $x lt 10; $x++>>\
<<for $y to 0; $y lt 10; $y++>>\
<<set $map[$px][$py] to 2>>\
<<switch $map[$x][$y]>>\
<<case 0>><img data-passage="block.png">\
<<case 1>><img data-passage="empty.png">\
<<case 2>><img data-passage="alien.gif">\
<<case 3>><img data-passage="snack store.png">\
<</switch>>\
<</for>>\
<br>\
<</for>>\
<</replace>>\
<</widget>>
}}}
Stylesheet:
{{{
#map {
line-height: 0;
border: 1px dotted;
width: 50vh;
}
img {
width: auto;
height: 5vh;
}
#story {
margin: auto;
}
body {
color: #111;
background-color: #fff;
}
}}}
Based on [[Moving through a dungeon|https://twinery.org/cookbook/dungeonmoving/sugarcube/sugarcube_dungeonmoving.html]] from the Twine Cookbook.
This example uses [[media passages|https://motoslave.net/sugacube/2/docs/#guide-media-passages]] created with [[Twine Enhancer|https://github.com/hogart/twine-enhancer]].
[[Voltar|Mapa]]